<%@page import="java.util.Arrays"%>
<%@page import="java.util.List"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Edit ${user.name} ${user.surname}'s
			Profile
		</title>
		
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/css/index.css" rel="stylesheet" />
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
		
		<script src="/film/js/jquery.js"></script>
		<script src="/film/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/film/js/jquery.validator.js"></script>
		<script src="/film/js/photoUpload.js"></script>
		
		<style>
			body {
				padding-top: 60px;
				/* 60px to make the container go all the way to the bottom of the topbar */
			}
			
			.classification {
				position: relative;
				width: 91px;
				height: 17px;
			}
			
			.classification .cover {
				position: absolute;
				background: transparent url(img/stars.png) top left no-repeat;
				top: 0px;
				left: 0px;
				width: 91px;
				height: 17px;
				z-index: 101;
			}
			
			.classification .progress {
				position: absolute;
				background: transparent url(img/stars_full.png) top left no-repeat;
				top: 0px;
				left: 0px;
				height: 17px;
				z-index: 102;
			}
		</style>
	</head>
	<body>
		<jsp:include page="navigationBar.jsp"/>	
	
		<div class="container">
			<form method="POST" action="/film/user/editUser.do">
				<table class="table table-condensed" width=100%>
					<h1>Profile Edit</h1>
					<tr>
						<td>Profile Picture :</td>
						<td>
							<input type="hidden" id="thumbnailUrl" name="<%=GeneralConstants.userThumbnailUrl%>" value="">
							<a href="#" id="uploadPhoto">
								<c:if test="${user.thumbnailUrl != null}">
									<img class="media-object" id="thumbnail" style="height: 200px; width: 200px;" src="/film/photo/getPhoto.do?fileName=${user.thumbnailUrl}">
								</c:if>
								
								<c:if test="${user.thumbnailUrl == null}">
									<img style="height: 200px; width: 200px;" id="thumbnail" class="media-object" src="/film/img/noavatar.png">
								</c:if>
							</a>
							<input type="file" name="fileData" id="image_file" />
						</td>
					</tr>
					<tr>
						<td>Name:</td>
						<td>
							<input type="text" placeholder="${user.name}" name="<%=GeneralConstants.userName %>">
						</td>
					</tr>	
					<tr>
						<td>Surname:</td>
						<td>
							<input type="text" placeholder="${user.surname}" name="<%=GeneralConstants.userSurname %>">
						</td>
					</tr>					
					<tr >
						<td>Profession:</td>	
						<td>
							<select id="jobpostingselect" multiple>							
							</select>							
							<c:if test="${user.userType != null}">
								<input type="hidden" id="jobpostinglabel" value="${user.userType}" name="<%=GeneralConstants.userType%>"/>
							</c:if>							
							<c:if test="${user.userType == null}">
								<input type="hidden" id="jobpostinglabel" value="" name="<%=GeneralConstants.userType%>"/>
							</c:if>
						</td>						
					</tr>					
					<tr>
						<td width=60% >
							<div id="physicalproperties" class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Physical Details: </a>
								</div>	
								<div id="collapseOne" class="accordion-body collapse">
									<div class="accordion-inner">
										<table >
											<tr>
												<td width=50%>Height: </td>
												<td>
													<input name="<%=GeneralConstants.userHeight %>" title="myHeight" type="number" value="${user.height}"> 
												</td>
												<td>cm</td>
											</tr>
											<tr>
												<td>Weight: </td>
												<td>
													<input name="<%=GeneralConstants.userWeight %>" title="myWeight" type="number" value="${user.weight}"> 
												</td>
												<td>kg</td>
											</tr>											
											<tr>
												<td>Hair: </td>
												<td>
													<select class="inp" title="hair" name="<%=GeneralConstants.userHairColor%>">
														<option value="${user.hairColor}">${user.hairColor}</option>
														<option value="blond">Blond</option>
														<option value="red">Red</option>
														<option value="auburn">Auburn</option>
														<option value="chestnut">Chestnut</option>									
														<option value="brown">Brown</option>
														<option value="black">Black</option>
														<option value="gray">Gray</option>
													</select>
												</td>
											</tr>
											<tr>
												<td>Eye: </td>
												<td>												 
													<select class="inp" title="eye" name="<%=GeneralConstants.userEyeColor%>">
														<option value="${user.eyeColor}">${user.eyeColor}</option>
														<option value="green">Green</option>
														<option value="hazel">Hazel</option>
														<option value="brown">Brown</option>
														<option value="black">Black</option>
														<option value="violet">Violet</option>
														<option value="gray">Gray</option>
													</select>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
						</td>
						<td></td>
					</tr>	
					<tr>
						<td>About:</td>
						<td>
							<textarea placeholder="${user.about}" name="<%=GeneralConstants.userAbout%>" cols=40 rows=6></textarea>
						</td>
					</tr>	
					<tr>
						<td>Gender:</td>
						<td>
							<input type="radio" name="<%=GeneralConstants.userGender%>" value="male">Male<br>
							<input type="radio" name="<%=GeneralConstants.userGender%>" value="female">Female
						</td>
					</tr>	
					<tr>
						<td>Birthday:</td>
						<td>
							<input type="date" placeholder="(dd/mm/yyyy)" name="<%=GeneralConstants.userBirthday %>">
						</td>
					</tr>	
					<tr>
						<td>Phone:</td>
						<td>
							<input type="phone" placeholder="+905xxxxxxxxx" name="<%=GeneralConstants.userPhone %>">
						</td>
					</tr>
					<tr>
						<td>
							<button class="btn btn-large btn-primary" type="submit">Submit</button>
						</td>
						<td></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
	
	<script type="text/javascript">
		$("#physicalproperties").hide();
		
		function getXMLHttpRequest() {
	        if (window.XMLHttpRequest) {
	            return new window.XMLHttpRequest;
	        } else {
	            try {
	                return new ActiveXObject("MSXML2.XMLHTTP.3.0");
	            } catch (e) {
	                return null;
	            }
	        }
	    }
		
		$("#image_file").change(function() {
			fileSelected('thumbnail', 'image_file');
			
			var $this = $(this);
			
			var file = $this[0].files[0];
		     
	        var xhr = getXMLHttpRequest();
	        var url = "/film/photo/upload.do";
	        xhr.open("POST", url, true);
	        var formdata = new FormData();
	        formdata.append("fileData", file, "file.jpg");
	        
	        xhr.onreadystatechange = function () {
	            if (xhr.readyState === 4) {
	                if (xhr.status === 200) {
	                    var response = JSON.parse(xhr.response);
	                    if (response.fileName) {
	                        $("#thumbnailUrl").val(response.fileName);
	                    } else {
	                    	alert("Server error");
	                    }
	                } else {
	                	alert("Cannot upload this image!");
	                }
	            }
	        };
	        
	        xhr.ontimeout = function () {
	            onfail("request timeout");
	        };
			
	        xhr.send(formdata);
		});
			
		$.ajax("/film/util/getUserTypes.do").done(function(data) {
			if (data && data.userTypeList) {
				$allUserTypes = data.userTypeList;
			
				$.ajax("/film/user/getLoggedUserTypes.do").done(function(data) {
					if (data && data.types) {
						$userTypes = data.types;
					}
					
					$.each($allUserTypes, function(key, cur) {
						if ($userTypes && $.inArray(cur.typeName, $userTypes) != -1) {
							$option = $("<option selected='selected' value='" + cur.typeName + "'>" + cur.typeName + "</option>");
						} else {
							$option = $("<option value='" + cur.typeName + "'>" + cur.typeName + "</option>");
						}
						
						$("#jobpostingselect").append($option);
					});
				});
			}
		});
		
		$("#jobpostingselect").live("change", function() {
			var selectedUserTypes = $(this).val();
			
			$("#jobpostinglabel").val(selectedUserTypes);
			
			if ($.inArray("actor", selectedUserTypes) != -1 || $.inArray("actress", selectedUserTypes) != -1 || $.inArray("dublour", selectedUserTypes) != -1) {
				$("#physicalproperties").show();
			} else {
				$("#physicalproperties").hide();
			}
		});	
		
	</script>	
	<script src="/film/js/commonScripts.js"></script>
</html>